<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高校疫情防控</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../js/now-time.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        .el-header {
            background-color: #545c64;
        }

        .header-img {
            width: 200px;
            margin-top: 20px;
            font-size: 25px;
            color: #ffffff;
        }

        .header-time {
            width: 200px;
            margin-left: 100px;
            font-size: 15px;
            color: #ffffff;
        }
    </style>

</head>
<body>
<div id="div">


    <el-container>
        <!--头部-->
        <el-header class="el-header">
            <el-container>
                <div style="padding-top: 10px">
                    <span class="header-img">高校疫情防控</span>
                </div>
                <div style="padding-top: 20px">
                    <span class="header-time">现在时间：<i id="timer" style="font-size: 13px"></i></span>
                </div>
                <div style="margin-top: 20px">
                    <span class="header-time">
                        <el-tag effect="plain" :key="userInfo.name">尊敬的{{ userInfo.name }}用户,您好！</el-tag>
                    </span>
                </div>
                <el-menu
                        mode="horizontal"
                        background-color="#545c64"
                        text-color="white"
                        active-text-color="#ffd04b"
                        style="margin-left: auto;">
                    <el-menu-item index="1"><a href="home.html" target="_self">首页</a></el-menu-item>
                    <el-menu-item index="3" @click="logout">退出登录</el-menu-item>
                </el-menu>
            </el-container>
        </el-header>


        <!-- 中间部分 -->
        <el-container style="height:700px; border: 1px solid #eee">
            <!-- 侧边栏 -->
            <el-aside width="220px" style="background-color: rgb(238, 241, 246)">

                <el-menu class="el-menu-demo">

                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-menu"></i>个人中心</template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1" @click="toEditPass"><i class="el-icon-edit"></i>修改密码</el-menu-item>
                            <el-menu-item index="1-2" @click="toShowInfo"><i class="el-icon-edit"></i>个人信息</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-menu"></i>每日打卡</template>
                        <el-menu-item-group>
                            <el-menu-item index="2-1" @click="toCheckin"><i class="el-icon-edit"></i>打卡</el-menu-item>
                            <el-menu-item index="2-2" @click="findCheckin"><i class="el-icon-tickets"></i>打卡记录</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>


                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-menu"></i>核酸检测</template>
                        <el-menu-item-group>
                            <el-menu-item index="3-1" @click="addNucleicAcid"><i class="el-icon-edit"></i>登记核酸检测结果</el-menu-item>
                            <el-menu-item index="3-2" @click="showNucleicAcid"><i class="el-icon-tickets"></i>核酸检测记录查询</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="4">
                        <template slot="title"><i class="el-icon-menu"></i>疫苗接种</template>
                        <el-menu-item-group>
                            <el-menu-item index="4-1" @click="applyVaccination"><i class="el-icon-edit"></i>疫苗接种登记</el-menu-item>
                            <el-menu-item index="4-2" @click="showVaccination"><i class="el-icon-tickets"></i>疫苗接种记录查询</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="5">
                        <template slot="title"><i class="el-icon-menu"></i>外出</template>
                        <el-menu-item-group>
                            <el-menu-item index="5-1" @click="outApply"><i class="el-icon-edit"></i>外出申请</el-menu-item>
                            <el-menu-item index="5-2" @click="findOutApply"><i class="el-icon-tickets"></i>外出记录</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <!-- 主区域部分 -->
                <el-main>
                    <iframe :src="iframeSrc" frameborder="false"
                            style="top:80px;left: 120px; width: 100%;height:650px"></iframe>
                </el-main>
            </el-container>
        </el-container>
    </el-container>

    <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="初始密码" :label-width="formLabelWidth">
                <el-input v-model="form.oldPass"
                          autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码" :label-width="formLabelWidth">
                <el-input v-model="form.password"
                          autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="editPass">确 定</el-button>
        </div>
    </el-dialog>
</div>


</body>
<script>
    new Vue({
        el: "#div",
        data: {
            iframeSrc: "date_module.html",
            user: {},
            userInfo: {},
            dialogFormVisible: false,
            form: {},
            formLabelWidth: '120px'
        },
        methods: {
            //弹窗
            open(mes, mes_type) {
                this.$alert(mes, '', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: mes_type,
                            message: mes,
                        });
                    }
                });
            },
            getUser() {
                axios.post("/EpidemicControlSystem_war_exploded/UserServlet", "action=user")
                    .then(res => {
                        this.user = res.data.loginUser;
                        this.userInfo = res.data.loginUserInfo;
                    });
            },
            editPass() {
                let param = "action=editPassword&oldPass=" + this.form.oldPass +
                    "&password=" + this.form.password;
                axios.post("/EpidemicControlSystem_war_exploded/UserServlet", param)
                    .then(res => {
                        if (res.data == true) {
                            this.open("修改成功", 'success');
                            this.dialogFormVisible = false;
                        } else {
                            this.open("修改失败。可能原因是旧密码输入不正确/新密码与旧密码相同！", 'error')
                        }
                    })
            },
            //修改密码
            toEditPass() {
                this.dialogFormVisible = true;
            },
            //个人信息
            toShowInfo: function () {
                this.iframeSrc = "to_myCenter.html";
            },
            toCheckin: function () {
                this.iframeSrc = "to_clock_daily.html";
            },
            findCheckin: function () {
                this.iframeSrc = "to_showStuCheckin.html";
            },
            //登记核酸检测结果
            addNucleicAcid: function () {
                this.iframeSrc = "to_addNucleicAcid.html";
            },
            //核酸检测记录查询
            showNucleicAcid: function () {
                this.iframeSrc = "to_showNucleicAcid.html";
            },
            //疫苗接种申请
            applyVaccination: function () {
                this.iframeSrc = "to_applyVaccination.html";
            },
            //疫苗接种记录查询
            showVaccination: function () {
                this.iframeSrc = "to_showVaccination.html";
            },
            //外出申请
            outApply: function () {
                this.iframeSrc = "to_outApply.html";
            },
            //查看申请记录
            findOutApply: function () {
                this.iframeSrc = "to_showOutApply.html";
            },
            logout: function () {
                axios.post("/EpidemicControlSystem_war_exploded/UserServlet", "action=userLogout")
                    .then(rsp => {
                        if (rsp.data == true) {
                            alert('退出成功');
                            window.open('../login.jsp', '_self');
                        }
                    })
            }
        },
        mounted: function () {   //自动触发写入的函数
            this.getUser();
        }
    });
</script>
</html>